<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZTZP-ConCaSys - 中铁装配施工计算软件</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        .header {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: all 0.3s ease;
        }

        .header.scrolled {
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        }

        .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            text-decoration: none;
        }

        .header.scrolled .logo {
            color: #333;
        }

        .logo i {
            margin-right: 0.5rem;
            font-size: 2rem;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
        }

        .header.scrolled .nav-links a {
            color: #333;
        }

        .nav-links a:hover {
            transform: translateY(-2px);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background: #667eea;
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* Hero Section */
        .hero {
            padding: 150px 0 100px;
            text-align: center;
            color: white;
            background: linear-gradient(rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3)), url('施工软件网站首页.png');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
            z-index: 1;
        }

        .hero .container {
            position: relative;
            z-index: 2;
        }

        .hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, #fff, #e0e7ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-button {
            display: inline-block;
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            color: white;
            padding: 15px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
        }

        /* Features Section */
        .features {
            background: white;
            padding: 100px 0;
            margin-top: -50px;
            border-radius: 50px 50px 0 0;
            position: relative;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 3rem;
            color: #333;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .feature-card {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
            transition: left 0.5s;
        }

        .feature-card:hover::before {
            left: 100%;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            font-size: 2rem;
            color: white;
        }

        .feature-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #333;
        }

        .feature-description {
            color: #666;
            line-height: 1.6;
        }

        /* Interactive Demo Section */
        .demo-section {
            background: #f8f9fa;
            padding: 100px 0;
        }

        .demo-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .demo-content h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #333;
        }

        .demo-content p {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .demo-interactive {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .demo-tabs {
            display: flex;
            border-bottom: 2px solid #eee;
            margin-bottom: 2rem;
        }

        .demo-tab {
            padding: 1rem 2rem;
            background: none;
            border: none;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            color: #666;
            transition: all 0.3s ease;
            position: relative;
        }

        .demo-tab.active {
            color: #667eea;
        }

        .demo-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #667eea;
        }

        .demo-content-area {
            min-height: 300px;
            display: none;
        }

        .demo-content-area.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .calculation-input {
            display: grid;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .input-group {
            display: grid;
            grid-template-columns: 1fr 2fr;
            align-items: center;
            gap: 1rem;
        }

        .input-group label {
            font-weight: 600;
            color: #333;
        }

        .input-group input {
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }

        .calculate-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
        }

        .calculate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .result-display {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 10px;
            margin-top: 1rem;
            border-left: 4px solid #667eea;
        }

        /* Architecture Section */
        .architecture {
            background: white;
            padding: 100px 0;
        }

        .architecture-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .arch-card {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
        }

        .arch-card:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .arch-icon {
            font-size: 3rem;
            color: #667eea;
            margin-bottom: 1rem;
        }

        .arch-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #333;
        }

        .arch-description {
            color: #666;
            font-size: 0.9rem;
        }

        /* Footer */
        .footer {
            background: #333;
            color: white;
            padding: 50px 0;
            text-align: center;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .footer-section h3 {
            margin-bottom: 1rem;
            color: #667eea;
        }

        .footer-section p, .footer-section a {
            color: #ccc;
            text-decoration: none;
            line-height: 1.6;
        }

        .footer-section a:hover {
            color: #667eea;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .nav-links {
                display: none;
            }
            
            .demo-container {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Animation Classes */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Scroll Indicator */
        .scroll-indicator {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: rgba(255, 255, 255, 0.2);
            z-index: 1001;
        }

        .scroll-progress {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            width: 0%;
            transition: width 0.1s ease;
        }
    </style>
</head>
<body>
    <!-- Scroll Indicator -->
    <div class="scroll-indicator">
        <div class="scroll-progress"></div>
    </div>

    <!-- Header -->
    <header class="header">
        <nav class="nav container">
            <a href="#" class="logo">
                <i class="fas fa-hard-hat"></i>
                ZTZP-ConCaSys
            </a>
            <ul class="nav-links">
                <li><a href="#features">功能特点</a></li>
                <li><a href="#demo">交互演示</a></li>
                <li><a href="#architecture">技术架构</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <h1>中铁装配施工计算软件</h1>
            <p>专业的建筑工程计算解决方案，集吊车起重计算、地基工程、土力学分析于一体的智能化施工辅助平台</p>
            <a href="particle-hover.html" class="cta-button">
                <i class="fas fa-rocket"></i> 开始体验
            </a>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="features">
        <div class="container">
            <h2 class="section-title fade-in">核心功能模块</h2>
            <div class="features-grid">
                <div class="feature-card fade-in" onclick="showFeatureDetail('crane')">
                    <div class="feature-icon">
                        <i class="fas fa-truck-loading"></i>
                    </div>
                    <h3 class="feature-title">吊车起重计算</h3>
                    <p class="feature-description">
                        支持液压汽车吊、履带吊等多种吊车类型的起重能力计算，包含工况分析、支腿力计算、稳定性验证等完整功能
                    </p>
                </div>

                <div class="feature-card fade-in" onclick="showFeatureDetail('foundation')">
                    <div class="feature-icon">
                        <i class="fas fa-building"></i>
                    </div>
                    <h3 class="feature-title">地基工程计算</h3>
                    <p class="feature-description">
                        地基承载力计算、沉降分析、边坡稳定性评估等地基工程核心计算模块，符合最新国标规范
                    </p>
                </div>

                <div class="feature-card fade-in" onclick="showFeatureDetail('soil')">
                    <div class="feature-icon">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <h3 class="feature-title">土力学分析</h3>
                    <p class="feature-description">
                        土压力计算、地基处理设计、基坑支护等土力学专业计算，提供详细的设计报告和图纸输出
                    </p>
                </div>

                <div class="feature-card fade-in" onclick="showFeatureDetail('drawing')">
                    <div class="feature-icon">
                        <i class="fas fa-drafting-compass"></i>
                    </div>
                    <h3 class="feature-title">技术图纸生成</h3>
                    <p class="feature-description">
                        自动生成计算简图、施工图、节点详图等技术图纸，支持CAD格式导出，提高设计效率
                    </p>
                </div>

                <div class="feature-card fade-in" onclick="showFeatureDetail('report')">
                    <div class="feature-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <h3 class="feature-title">智能报告生成</h3>
                    <p class="feature-description">
                        一键生成专业计算报告，包含计算过程、结果分析、规范依据等完整内容，支持Word/PDF格式
                    </p>
                </div>

                <div class="feature-card fade-in" onclick="showFeatureDetail('ai')">
                    <div class="feature-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3 class="feature-title">AI智能助手</h3>
                    <p class="feature-description">
                        集成DeepSeek AI大模型，提供智能计算建议、方案优化、问题解答等AI辅助功能
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Interactive Demo Section -->
    <section id="demo" class="demo-section">
        <div class="container">
            <div class="demo-container">
                <div class="demo-content fade-in">
                    <h2>交互式体验</h2>
                    <p>体验我们强大的计算引擎，输入参数即可实时查看计算结果。支持多种计算类型，界面友好，操作简便。</p>
                    <p>点击下方标签切换不同的计算模式，输入相应参数进行实时计算。</p>
                </div>

                <div class="demo-interactive fade-in">
                    <div class="demo-tabs">
                        <button class="demo-tab active" onclick="switchTab('crane-demo')">吊车计算</button>
                        <button class="demo-tab" onclick="switchTab('foundation-demo')">地基计算</button>
                        <button class="demo-tab" onclick="switchTab('soil-demo')">土力学计算</button>
                    </div>

                    <div id="crane-demo" class="demo-content-area active">
                        <h3>液压汽车吊起重计算</h3>
                        <div class="calculation-input">
                            <div class="input-group">
                                <label>最大起重重量 (t):</label>
                                <input type="number" id="crane-weight" placeholder="50" value="50">
                            </div>
                            <div class="input-group">
                                <label>主臂长度 (m):</label>
                                <input type="number" id="crane-boom" placeholder="45.5" value="45.5">
                            </div>
                            <div class="input-group">
                                <label>工作半径 (m):</label>
                                <input type="number" id="crane-radius" placeholder="8" value="8">
                            </div>
                        </div>
                        <button class="calculate-btn" onclick="calculateCrane()">
                            <i class="fas fa-calculator"></i> 计算起重能力
                        </button>
                        <div id="crane-result" class="result-display" style="display: none;">
                            <strong>计算结果：</strong><br>
                            在此工况下，最大安全起重重量为 <span id="crane-capacity">42.5</span> 吨
                        </div>
                    </div>

                    <div id="foundation-demo" class="demo-content-area">
                        <h3>地基承载力计算</h3>
                        <div class="calculation-input">
                            <div class="input-group">
                                <label>基础宽度 (m):</label>
                                <input type="number" id="foundation-width" placeholder="3.0" value="3.0">
                            </div>
                            <div class="input-group">
                                <label>基础埋深 (m):</label>
                                <input type="number" id="foundation-depth" placeholder="1.5" value="1.5">
                            </div>
                            <div class="input-group">
                                <label>土体容重 (kN/m³):</label>
                                <input type="number" id="soil-weight" placeholder="18.5" value="18.5">
                            </div>
                        </div>
                        <button class="calculate-btn" onclick="calculateFoundation()">
                            <i class="fas fa-calculator"></i> 计算地基承载力
                        </button>
                        <div id="foundation-result" class="result-display" style="display: none;">
                            <strong>计算结果：</strong><br>
                            地基承载力特征值： <span id="bearing-capacity">245.6</span> kPa<br>
                            地基承载力设计值： <span id="design-capacity">368.4</span> kPa
                        </div>
                    </div>

                    <div id="soil-demo" class="demo-content-area">
                        <h3>主动土压力计算</h3>
                        <div class="calculation-input">
                            <div class="input-group">
                                <label>填土高度 (m):</label>
                                <input type="number" id="soil-height" placeholder="5.0" value="5.0">
                            </div>
                            <div class="input-group">
                                <label>土体内摩擦角 (°):</label>
                                <input type="number" id="soil-angle" placeholder="30" value="30">
                            </div>
                            <div class="input-group">
                                <label>土体重度 (kN/m³):</label>
                                <input type="number" id="soil-density" placeholder="18" value="18">
                            </div>
                        </div>
                        <button class="calculate-btn" onclick="calculateSoil()">
                            <i class="fas fa-calculator"></i> 计算土压力
                        </button>
                        <div id="soil-result" class="result-display" style="display: none;">
                            <strong>计算结果：</strong><br>
                            主动土压力系数： <span id="active-coefficient">0.333</span><br>
                            总主动土压力： <span id="total-pressure">75.0</span> kN/m
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Architecture Section -->
    <section id="architecture" class="architecture">
        <div class="container">
            <h2 class="section-title fade-in">技术架构</h2>
            <div class="architecture-grid">
                <div class="arch-card fade-in">
                    <div class="arch-icon">
                        <i class="fab fa-python"></i>
                    </div>
                    <h3 class="arch-title">PyQt5框架</h3>
                    <p class="arch-description">基于Python和PyQt5构建的现代化GUI应用，跨平台兼容性强</p>
                </div>

                <div class="arch-card fade-in">
                    <div class="arch-icon">
                        <i class="fas fa-database"></i>
                    </div>
                    <h3 class="arch-title">SQLite数据库</h3>
                    <p class="arch-description">轻量级数据库存储吊车参数、工程数据，支持快速查询和更新</p>
                </div>

                <div class="arch-card fade-in">
                    <div class="arch-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="arch-title">计算引擎</h3>
                    <p class="arch-description">专业工程计算算法，符合国标规范，计算结果准确可靠</p>
                </div>

                <div class="arch-card fade-in">
                    <div class="arch-icon">
                        <i class="fas fa-file-code"></i>
                    </div>
                    <h3 class="arch-title">模块化设计</h3>
                    <p class="arch-description">松耦合架构，易于扩展新功能，维护成本低</p>
                </div>

                <div class="arch-card fade-in">
                    <div class="arch-icon">
                        <i class="fas fa-paint-brush"></i>
                    </div>
                    <h3 class="arch-title">现代化UI</h3>
                    <p class="arch-description">响应式设计，支持主题切换，用户体验优秀</p>
                </div>

                <div class="arch-card fade-in">
                    <div class="arch-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="arch-title">安全可靠</h3>
                    <p class="arch-description">内存泄漏修复，异常处理完善，长期运行稳定</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer id="contact" class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>联系信息</h3>
                    <p><i class="fas fa-envelope"></i> ztzp@crpcc.com.cn</p>
                    <p><i class="fas fa-phone"></i> 15110094304</p>
                    <p><i class="fas fa-map-marker-alt"></i> 北京市房山区长阳镇葫芦垡万兴路86-5号</p>
                </div>
                <div class="footer-section">
                    <h3>技术支持</h3>
                    <p><a href="#"><i class="fas fa-book"></i> 用户手册</a></p>
                    <p><a href="#"><i class="fas fa-video"></i> 视频教程</a></p>
                    <p><a href="#"><i class="fas fa-question-circle"></i> 常见问题</a></p>
                </div>
                <div class="footer-section">
                    <h3>关于我们</h3>
                    <p>中铁装配施工计算软件是专为建筑工程设计的专业计算平台，致力于提高施工计算的准确性和效率。</p>
                </div>
            </div>
            <p>&copy; 2025 ZTZP-ConCaSys. 保留所有权利。</p>
        </div>
    </footer>

    <script>
        // Welcome message animation with explosion effects - only on blank areas
        document.addEventListener('click', function(e) {
            // 检查点击的是否是空白区域（不是按钮、链接、输入框等）
            if (e.target.tagName === 'HTML' || e.target.tagName === 'BODY' || 
                e.target.classList.contains('hero') || e.target.classList.contains('features') ||
                e.target.classList.contains('demo-section') || e.target.classList.contains('architecture')) {
                
                // 阻止事件冒泡
                e.stopPropagation();

                // 创建爆炸容器
                const explosionContainer = document.createElement('div');
                explosionContainer.style.cssText = `
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    pointer-events: none;
                    z-index: 10000;
                    overflow: hidden;
                `;

                // 创建爆炸文字
                const explosionText = document.createElement('div');
                explosionText.innerHTML = '欢迎使用，中铁装配施工计算软件';
                explosionText.style.cssText = `
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 2.5rem;
                    font-weight: bold;
                    color: #000000;
                    text-shadow: 0 0 15px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 255, 255, 0.5);
                    z-index: 10001;
                    animation: explosionEffect 2.5s ease-out forwards;
                    text-align: center;
                    white-space: nowrap;
                    letter-spacing: 3px;
                    filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.8));
                `;

                // 添加爆炸动画CSS
                const style = document.createElement('style');
                style.textContent = `
                    @keyframes explosionEffect {
                        0% {
                            opacity: 0;
                            transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
                            filter: blur(10px) brightness(0);
                        }
                        15% {
                            opacity: 1;
                            transform: translate(-50%, -50%) scale(1.3) rotate(180deg);
                            filter: blur(0px) brightness(2);
                        }
                        30% {
                            transform: translate(-50%, -50%) scale(1.5) rotate(360deg);
                            filter: blur(0px) brightness(1.5);
                        }
                        50% {
                            transform: translate(-50%, -50%) scale(1.2) rotate(720deg);
                            filter: blur(0px) brightness(2) drop-shadow(0 0 30px rgba(102, 126, 234, 1));
                        }
                        70% {
                            transform: translate(-50%, -50%) scale(1.1) rotate(1080deg);
                            filter: blur(0px) brightness(1.8) drop-shadow(0 0 50px rgba(118, 75, 162, 1));
                        }
                        85% {
                            transform: translate(-50%, -50%) scale(0.8) rotate(1440deg);
                            opacity: 0.8;
                        }
                        100% {
                            opacity: 0;
                            transform: translate(-50%, -50%) scale(2) rotate(1800deg);
                            filter: blur(20px) brightness(3);
                        }
                    }

                    .explosion-particle {
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        pointer-events: none;
                        z-index: 10002;
                        box-shadow: 0 0 10px currentColor;
                    }

                    .explosion-ring {
                        position: absolute;
                        border: 3px solid rgba(255, 255, 255, 0.8);
                        border-radius: 50%;
                        animation: shockwave 2s ease-out forwards;
                        z-index: 10000;
                    }

                    @keyframes shockwave {
                        0% {
                            width: 0;
                            height: 0;
                            opacity: 1;
                            transform: translate(-50%, -50%) scale(0);
                        }
                        15% {
                            width: 200px;
                            height: 200px;
                            opacity: 0.9;
                        }
                        30% {
                            width: 400px;
                            height: 400px;
                            opacity: 0.8;
                        }
                        100% {
                            width: 1000px;
                            height: 1000px;
                            opacity: 0;
                            transform: translate(-50%, -50%) scale(2);
                        }
                    }

                    @keyframes explosionEffect {
                        0% {
                            opacity: 0;
                            transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
                            filter: blur(10px) brightness(0);
                        }
                        8% {
                            opacity: 1;
                            transform: translate(-50%, -50%) scale(1.0) rotate(0deg);
                            filter: blur(0px) brightness(1.5);
                        }
                        15% {
                            opacity: 1;
                            transform: translate(-50%, -50%) scale(1.0) rotate(0deg);
                            filter: blur(0px) brightness(2);
                        }
                        25% {
                            transform: translate(-50%, -50%) scale(1.1) rotate(180deg);
                            filter: blur(0px) brightness(2.5);
                        }
                        40% {
                            transform: translate(-50%, -50%) scale(1.2) rotate(360deg);
                            filter: blur(0px) brightness(3) drop-shadow(0 0 30px rgba(102, 126, 234, 1));
                        }
                        60% {
                            transform: translate(-50%, -50%) scale(1.1) rotate(720deg);
                            filter: blur(0px) brightness(2.8) drop-shadow(0 0 50px rgba(118, 75, 162, 1));
                        }
                        80% {
                            transform: translate(-50%, -50%) scale(0.8) rotate(1080deg);
                            opacity: 0.7;
                        }
                        100% {
                            opacity: 0;
                            transform: translate(-50%, -50%) scale(3) rotate(1440deg);
                            filter: blur(30px) brightness(4);
                        }
                    }

                    @keyframes particleExplosion {
                        0% {
                            opacity: 1;
                            transform: scale(1);
                        }
                        100% {
                            opacity: 0;
                            transform: scale(0);
                        }
                    }
                `;
                document.head.appendChild(style);

                // 创建爆炸效果元素
                const flash = document.createElement('div');
                flash.className = 'explosion-flash';
                flash.style.cssText = `
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 10001;
                `;

                const shockwave = document.createElement('div');
                shockwave.className = 'explosion-ring';
                shockwave.style.cssText = `
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 10000;
                `;

                // 创建爆炸碎片
                for (let i = 0; i < 20; i++) {
                    const debris = document.createElement('div');
                    debris.className = 'explosion-debris';
                    debris.style.cssText = `
                        position: fixed;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        z-index: 10003;
                    `;
                    
                    const angle = (i / 20) * 2 * Math.PI;
                    const distance = 200 + Math.random() * 300;
                    const endX = Math.cos(angle) * distance;
                    const endY = Math.sin(angle) * distance;
                    
                    setTimeout(() => {
                        debris.style.transform = `translate(calc(-50% + ${endX}px), calc(-50% + ${endY}px)) rotate(${Math.random() * 720}deg) scale(0)`;
                    }, 50);
                    
                    explosionContainer.appendChild(debris);
                }

                // 创建爆炸粒子（120个粒子全方位爆炸）
                for (let i = 0; i < 120; i++) {
                    setTimeout(() => {
                        const particle = document.createElement('div');
                        particle.className = 'explosion-particle';
                        
                        const angle = (i / 120) * 2 * Math.PI;
                        const velocity = 150 + Math.random() * 300;
                        const duration = 1000 + Math.random() * 500;
                        
                        const colors = [
                            '#ff0000', '#ff3300', '#ff6600', '#ff9900', '#ffcc00',
                            '#ffff00', '#ccff00', '#99ff00', '#66ff00', '#33ff00',
                            '#00ff00', '#00ff33', '#00ff66', '#00ff99', '#00ffcc',
                            '#00ffff', '#00ccff', '#0099ff', '#0066ff', '#0033ff',
                            '#0000ff', '#3300ff', '#6600ff', '#9900ff', '#cc00ff',
                            '#ff00ff', '#ff00cc', '#ff0099', '#ff0066', '#ff0033'
                        ];
                        
                        const color = colors[Math.floor(Math.random() * colors.length)];
                        particle.style.backgroundColor = color;
                        particle.style.boxShadow = `0 0 20px ${color}, 0 0 40px ${color}, 0 0 60px ${color}`;
                        
                        particle.style.cssText += `
                            position: fixed;
                            top: 50%;
                            left: 50%;
                            z-index: 10002;
                            animation: particleExplosion ${duration}ms ease-out forwards;
                        `;

                        // 设置粒子爆炸轨迹
                        const endX = Math.cos(angle) * velocity;
                        const endY = Math.sin(angle) * velocity;
                        
                        setTimeout(() => {
                            particle.style.transform = `translate(calc(-50% + ${endX}px), calc(-50% + ${endY}px)) scale(0)`;
                        }, 100);

                        explosionContainer.appendChild(particle);
                        
                        setTimeout(() => {
                            if (particle.parentNode) particle.remove();
                        }, duration + 200);
                    }, i * 8);
                }

                // 添加到页面
                document.body.appendChild(explosionContainer);
                document.body.appendChild(flash);
                document.body.appendChild(shockwave);
                document.body.appendChild(explosionText);

                // 2.5秒后清理所有元素
                setTimeout(() => {
                    explosionText.remove();
                    flash.remove();
                    shockwave.remove();
                    explosionContainer.remove();
                    style.remove();
                }, 2500);
            }
        });

        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Scroll progress indicator
        window.addEventListener('scroll', () => {
            const scrolled = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
            document.querySelector('.scroll-progress').style.width = scrolled + '%';
            
            // Header background change
            const header = document.querySelector('.header');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

        // Fade in animation
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.fade-in').forEach(el => {
            observer.observe(el);
        });

        // Tab switching
        function switchTab(tabId) {
            // Hide all content areas
            document.querySelectorAll('.demo-content-area').forEach(area => {
                area.classList.remove('active');
            });
            
            // Remove active class from all tabs
            document.querySelectorAll('.demo-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // Show selected content area
            document.getElementById(tabId).classList.add('active');
            
            // Add active class to clicked tab
            event.target.classList.add('active');
        }

        // Feature detail modal (simplified)
        function showFeatureDetail(feature) {
            const details = {
                'crane': '吊车起重计算模块支持多种吊车类型，包括液压汽车吊、履带吊、塔吊等。提供详细的起重能力曲线、工况分析、支腿力计算、稳定性验证等功能。',
                'foundation': '地基工程计算模块包含地基承载力计算、沉降分析、桩基设计、地基处理等功能。严格按照最新国标规范进行计算。',
                'soil': '土力学分析模块提供土压力计算、边坡稳定性分析、基坑支护设计、地基处理方案设计等专业功能。',
                'drawing': '技术图纸生成模块可以自动生成计算简图、施工图、节点详图等，支持CAD格式导出，大大提高设计效率。',
                'report': '智能报告生成模块可以一键生成完整的计算报告，包含计算过程、结果分析、规范依据等内容，支持多种格式导出。',
                'ai': 'AI智能助手集成DeepSeek大模型，可以提供智能计算建议、方案优化、实时问题解答等功能，让计算更智能。'
            };
            
            alert(details[feature]);
        }

        // Interactive calculations
        function calculateCrane() {
            const weight = parseFloat(document.getElementById('crane-weight').value);
            const boom = parseFloat(document.getElementById('crane-boom').value);
            const radius = parseFloat(document.getElementById('crane-radius').value);
            
            // Simplified calculation logic
            const capacity = Math.max(0, weight * (1 - radius / (boom * 0.8))).toFixed(1);
            
            document.getElementById('crane-capacity').textContent = capacity;
            document.getElementById('crane-result').style.display = 'block';
        }

        function calculateFoundation() {
            const width = parseFloat(document.getElementById('foundation-width').value);
            const depth = parseFloat(document.getElementById('foundation-depth').value);
            const weight = parseFloat(document.getElementById('soil-weight').value);
            
            // Simplified calculation logic
            const bearingCapacity = (weight * depth * 1.2 + weight * width * 0.5).toFixed(1);
            const designCapacity = (bearingCapacity * 1.5).toFixed(1);
            
            document.getElementById('bearing-capacity').textContent = bearingCapacity;
            document.getElementById('design-capacity').textContent = designCapacity;
            document.getElementById('foundation-result').style.display = 'block';
        }

        function calculateSoil() {
            const height = parseFloat(document.getElementById('soil-height').value);
            const angle = parseFloat(document.getElementById('soil-angle').value);
            const density = parseFloat(document.getElementById('soil-density').value);
            
            // Simplified calculation logic
            const activeCoefficient = Math.tan((45 - angle/2) * Math.PI/180)**2;
            const totalPressure = 0.5 * density * height**2 * activeCoefficient;
            
            document.getElementById('active-coefficient').textContent = activeCoefficient.toFixed(3);
            document.getElementById('total-pressure').textContent = totalPressure.toFixed(1);
            document.getElementById('soil-result').style.display = 'block';
        }

        // Add some interactive hover effects
        document.querySelectorAll('.feature-card').forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'translateY(-10px) scale(1.02)';
            });
            
            card.addEventListener('mouseleave', () => {
                card.style.transform = 'translateY(0) scale(1)';
            });
        });

        // Initialize page
        document.addEventListener('DOMContentLoaded', () => {
            // Add loading animation
            document.body.style.opacity = '0';
            setTimeout(() => {
                document.body.style.transition = 'opacity 0.5s ease';
                document.body.style.opacity = '1';
            }, 100);
        });
    </script>
</body>
</html>